<template>
  <div class="wrap-box">
    <div class="wrap-box-num">
      <p>今日订单总数</p>
      <span>{{ countOrder.orderCount }}</span>
    </div>
    <div class="wrap-box-num">
      <p>今日销售总额</p>
      <span>{{ countOrder.orderMoney }}</span>
    </div>
    <div class="wrap-box-num">
      <p>近7天订单总数</p>
      <span>{{ countOrder.orderCount7 }}</span>
    </div>
    <div class="wrap-box-num">
      <p>近7天销售总额</p>
      <span>{{ countOrder.orderMoney7 }}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      countOrder: {},
    }
  },
  created() {
    this.countOrderList()
  },
  methods: {
    countOrderList() {
      //订单统计
      this.$axios.get('/count/bigscreent1/countOrder').then((data) => {
        this.countOrder = {}
        if (data.code == 200) {
          this.countOrder = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.wrap-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px;
  &-num {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    color: #303133;
    padding: 15px 25px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    p {
      font-size: 16px;
      font-weight: 400;
      color: #b1b1b1;
      margin-bottom: 10px;
    }
    span {
      font-size: 32px;
      font-weight: 400;
      color: #000000;
    }
  }
}
</style>
